<template>
	<view>
		
		<journey-upload :isShow="onUpload"></journey-upload>
		<journey-AiExchange :isDock="true" :existTabBar="true"></journey-AiExchange>
		<view class="content">
			<!-- 地图容器 -->
			<map id="mapContainer" style="width: 100%; height: 500px;" longitude="116.397128" latitude="39.916527"
				:markers="markers" @markertap="onMarkerTap" @regionchange="onRegionChange">

				<cover-view class="cover-view" v-show="showPopup">
					<cover-view class="container">
						<cover-view class="flex-wrp" style="flex-direction:row;">
							<cover-view class="flex-item demo-text-1">
								<cover-view class="scenicName">{{attractionsName}}</cover-view>
								<cover-view class="spotIntroduction"
									style="white-space: normal;">{{introduction.length>32 ? introduction.slice(0,31)+'...': introduction}}</cover-view>
								<!-- <navigator url="/pages/index/index">
									<button class="weui-btn" type="primary">返回</button>
								</navigator> -->
								<cover-view style="display:flex;justify-content:space-around">
									<button class="getHereBtn" @click="getHereBtn">出 发</button>
									<button class="detailsBtn" @click="detailsBtn">详 情</button>
								</cover-view>
							</cover-view>

						</cover-view>
					</cover-view>
				</cover-view>

				<cover-view class="locationMy">
					<cover-image src="../../../static/scent/dingwei.png" @click="backLocal"></cover-image>
				</cover-view>
			</map>
		</view>
	</view>
</template>

<script>
	import * as scenicSpots from '@/api/spotApi/spotManage.js'
	export default {
		// 页面的初始数据
		data() {
			return {
				onUpload: true,
				showPopup: false,
				introduction: '', //景点简介
				scenicName: '', //景点名
				map: null, // 用于存储地图实例
				markerInfo: '', //景点的所有信息
				markers: []//景点信息
			};
		},
		onReady() {
			this.map = wx.createMapContext('mapContainer');
			this.businessAttractions()
		},
		onLaunch() {
			this.businessAttractions()
		},
		methods: {
			onMarkerTap(e) {
				console.log('marker tap', e);
				// 获取点击的标记点的id
				const markerId = e.markerId;
				// 根据markerId获取对应的景点信息
				const markerInfo = this.markers.find(marker => marker.id === markerId);
				this.markerInfo = markerInfo;
				this.showPopup = true;

				// 获取标记点的位置信息
				const {
					latitude,
					longitude
				} = markerInfo;
				console.log("新的坐标", latitude, longitude)
				// 计算cover-view应该显示的位置（这里简单处理，实际需根据地图缩放比例等因素进行调整）
				//const left = longitude * 缩放比例系数;
				//const top = latitude * 缩放比例系数;

				this.attractionsName = markerInfo.attractionsName;
				this.introduction = markerInfo.attractionsIntroduction

				// 更新数据
				this.$set({
					markers: this.markers,
				}, () => {
					// 在标记上显示气泡窗口
					this.map.showCallout({
						markerId
					});
				});
			},
			//跳转第三方导航
			getHereBtn() {

			},
			//跳转详情界面
			detailsBtn() {
				console.log('跳转详情页',this.markerInfo)
				//this.markerInfo.attractionsPicture = encodeURIComponent(this.markerInfo.attractionsPicture)
				uni.navigateTo({
					url: '/pages/main/map/makerDetail?spotId=' + this.markerInfo.id
				})
			},
			closePopup() {
				this.showPopup = false;
			},
			onRegionChange(e) {
				console.log("e", e)
				if (e.type === 'end' && (e.causedBy === 'drag' || e.causedBy === 'scale')) {
					this.showPopup = false;
					// 获取当前地图的缩放级别
					this.map.getScale({
						success: (res) => {
							const scale = res.scale;
							if (scale < 10) {
								this.markers.forEach((marker) => {
									// 将标记和气泡都设为不显示状态
									marker.width = 0;
									marker.height = 0;
								});
							} else {
								this.markers.forEach((marker) => {
									// 根据实际需要调整大小
									marker.width = 2 * scale;
									marker.height = 2 * scale;
								});
							}

							this.$set(this, 'markers', this.markers);
						}
					});
				}
			},
			//获取所有营业的景区
			businessAttractions() {
				scenicSpots.businessList(0).then((resp) => {
					
					// this.markers=resp.data
					resp.data.forEach((data)=>{
						data.width=20;
						data.height=20;
						this.markers.push(data)
					})
					console.log('景点营业',this.markers)
					
				}).catch(()=>{
					
				})
			}

		}
	};
</script>

<style scoped lang="scss">
	.map-container {
		position: relative;
		width: 100%;
		height: 400px;
	}

	.popup {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 20px;
		background-color: #fff;
		border: 1px solid #ccc;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		z-index: 9999;
		display: none;
	}

	.cover-view {
		position: absolute;
		top: calc(50% - 150rpx);
		left: calc(50% - 250rpx);
		/* opacity: .7; */
	}

	.flex-wrp {
		display: flex;
	}

	.flex-item {
		width: 90%;
		height: 300rpx;
		font-size: 26rpx;
	}

	.demo-text-1 {
		background: rgba(255, 255, 255, 0.7);
	}


	.spotIntroduction {
		font-size: 32rpx;
		padding: 10px 10px;
	}

	.scenicName {
		font-size: 35rpx;
		padding: 10px 10px;
	}

	.getHereBtn {
		border-radius: 100%;
		background-color: green;
		color: #fff;
		font-size: 12px;
		padding: 3px;
	}

	.detailsBtn {
		border-radius: 100%;
		background-color: green;
		color: #fff;
		font-size: 12px;
		padding: 3px;
	}

	.locationMy {
		position: absolute;
		background-color: #fff;
		width: 30px;
		border-radius: 5px;
		top: calc(50% - 150rpx);
		left: 15px;
	}

	.journey-main {
		overflow-y: scroll; // 超出滚动
		overscroll-behavior: none; // 禁止滚动溢出
	}
</style>